<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title>幸运翻牌</title>
    <link rel="stylesheet" href="../common/css/normalize.css">
    <link rel="stylesheet" href="../common/css/common.min.css">
    <link rel="stylesheet" href="../common/css/iconfont.css">
    <!--<link rel="stylesheet" href="css/luckyCard.min.css">-->
	<style>
		.col{ box-sizing: border-box;}
		.parent{ }
		.box{  position: relative; background: #ccc;  width : 32%; float : left; margin-left : 2%; height :200px;}
		.box:nth-child(3n+1){ margin-left : 0;}
		.front,.back{ position: absolute; left : 0; top : 0; right : 0;}
		.front{ background : slateblue;}
		.back{ background : darkorchid;}
	</style>
</head>
<body>
	<div id="fanzhuan" class="col">
		<!--<div class="parent">-->
			<div class="box">
				<div class="front">正面</div>
				<div class="back">反面</div>
			</div>
		<!--</div>-->
		<!--<div class="parent">-->
			<div class="box">
				<div class="front">正面</div>
				<div class="back">反面</div>
			</div>
		<div class="box">
				<div class="front">正面</div>
				<div class="back">反面</div>
			</div>
		<div class="box">
				<div class="front">正面</div>
				<div class="back">反面</div>
			</div>
		<div class="box">
				<div class="front">正面</div>
				<div class="back">反面</div>
			</div>
		<div class="box">
				<div class="front">正面</div>
				<div class="back">反面</div>
			</div>
		<!--</div>-->


	</div>
	<script src="../common/lib/vue.min.js"></script>

	<script>
		var father = document.getElementsByClassName('')
		const fanzhuan = new Vue({
			el: '#fanzhuan',
			data: {
			    isShow:false,
                win:true,
                prize: true,
//                fan:false, //默认关闭翻转状态
				prizeList:[
					{id:0,fan:0,img:''},
					{id:1,fan:0,img:''},
					{id:2,fan:0,img:'../common/img/prize.jpg'},
					{id:3,fan:0,img:''},
					{id:4,fan:0,img:''},
					{id:5,fan:0,img:''}
				]
			},
			methods:{
			    //翻转卡片
                fanpai:function  (e) {
                    const that = this
                    e.fan = 1
	                setTimeout(function () {
		                for(let x of that.prizeList){
		                    x.fan = 1
		                }
                    },1500)

                },
			    getResult: function () {
			        const that = this
				    setTimeout(function () {
                        that.isShow = !that.isShow
                    },1500)
                },
                showPrize: function () {
                    this.prize = !this.prize
                },
                getResult2: function () {
                    const that = this
                    setTimeout(function () {
                        that.win = !that.win
//                        that.isShow = !that.isShow
                    },1500)
                },
				close: function () {
					this.isShow = !this.isShow
                    this.win = !this.win
                }
			}

		})
	</script>
</body>
</html>